 // 1.1 获取裁剪区域的 DOM 元素
  var img = $('#image')
  // 1.2 配置选项
  const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
  }

  // 1.3 创建裁剪区域
  img.cropper(options)


            //点击按钮 触发input 的点击事件  选中图片
  $('#chooseImageBtn').on('click',function(){
      $('#chooseImageInp').click()
  })

  $('#chooseImageInp').on('change',function(){

    //获取文件对象
    let file =this.files[0]
    //非空校验
    if(file === undefined){
        return layui.layer.msg('上传头像，为空')
    }
    let url =URL.createObjectURL(file)
    console.log(url);
    //给浏览器图片区域赋值
    img.cropper('destroy')          //先销毁 在设置 渲染
    .attr('src' ,url)
    .cropper(options)               
  })

            // 上传头像
        $('#uploadBtn').on('click',function(){
                    //剪裁区域图片  转换为base64字符串
    var dataURL =img.cropper('getCroppedCanvas',{
                        width:100,
                        height:100
                    })
                    .toDataURL('image/png')


        axios({
            method:'POST',
            url:'/my/update/avatar',
            data:'avatar='+encodeURIComponent(dataURL)
        }).then(res=>{
            if(res.data.status !==0){
                return layui.layer.msg(res.data.message)
            }
                    //成功提示
            layui.layer.msg('更改成功')
            window.parent.getUserInfo()
        })
        })